<template>
	<div class="upload-cus">
		<el-upload :file-list="fileList" :action="upload_file_url" :name="upload_file_col" :data="upload_ssl_file_data"
			:on-success="handleUploadSuccess" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
			:multiple="multiple" :limit="limit" :on-exceed="handleExceed">
			<slot><button class="fujian">上传文件</button></slot>
		</el-upload>
		<el-dialog :append-to-body="true" :visible.sync="dialogVisible">
			<img width="100%" :src="dialogImageUrl" alt="" />
		</el-dialog>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";

	export default {
		name: "ssl-file-upload",
		components: {},
		props: {
			upload_params: {
				type: Object,
				default: () => {
					return {}
				}
			},
			//上传图片的键名  图片数据源
			uid: {},

			fileList: [],
			list_upload: [],
			limit: {
				default: 1,
			},
			multiple: {
				default: false,
			},
		},
		data() {
			return {
				// fileList: [],
				dialogImageUrl: "",
				dialogVisible: false,
			};
		},
		computed: {
			...mapState([""]),

			upload_ssl_file_data() {
				let token = localStorage.getItem("token");
				return {
					action: "upload_uploadSSL",
					token: token,
					...this.upload_params
				};
			},
		},

		watch: {},

		created() {},

		methods: {
			//上传成功
			handleUploadSuccess(res, file) {
				console.log("上传结果 res", res);
				console.log("上传结果 file", file);
				let {
					code,
					data,
					msg
				} = res;
				if (code == 200) {
					this.$emit("eventCallback", {
						type: "文件上传成功",
						uid: this.uid,
						data: res.data,
					});
				}
			},

			//预览图片
			handlePictureCardPreview(file) {
				// this.dialogImageUrl = file.url;
				// this.dialogVisible = true;
			},

			//移除上传
			handleRemove(file, fileList, other) {
				console.log("删除图片 file", file);
				console.log("删除图片 fileList", fileList);
				console.log("删除图片 other", other);
				// let index = this.list_upload.findIndex((item) => item.uid == file.uid);
				// this.list_upload.splice(index, 1);

				this.$emit("parentHandleUpload", {
					type: "删除成功",
					colName: this.col,
					file,
					res: file.response,
				});

				// this.$emit("parentHandleUploadDelete", {
				//   file,
				//   colName: this.col,
				// });
			},

			//上传超出数量
			handleExceed(files, fileList) {
				this.$message.warning(
					`当前限制选择${this.limit}个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
				);
			},
		},
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.el-upload--picture-card {
		border: none;
	}

	/deep/ .el-upload {
		// .flex-center();
		width: 140px;
		border: none;
		background: #fff;
	}

	.fujian {
		.flex-center();
		width: 110px;
		height: 35px;
		border: 1px solid #036dd1;
		border-radius: 4px;
		color: #036dd1;
		background: #fff;
		font-size: 14px;
	}
</style>